<template>
  <view class="whole">
    <view class="price">
      <text>充值金额</text>
      <view class="price_input">
        <text>￥</text>
        <input
          v-model="price"
          placeholder="输入充值金额"
          style="flex: 1"
          type="number"
          @input="checkNum"
        />
      </view>
      <!-- <text>手续费({{shopDetail.commission_money}}%)</text> -->
    </view>

    <view class="popup_box">
      <view class="popup_box_top">
        请选择支付方式
        <!-- <span v-if="!backcardstate" @click="tobackcard">绑定银行卡</span>  -->
      </view>

      <!-- 小马哥支付 -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('10') != -1"
        @click="handleCheckPayType(5)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/xiaoma_logo.jpg"
          ></image>
          <view class="popup_box_paytype_type">小马支付</view>
        </view>

        <image
          v-if="payTypeChecked == 5"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 支付宝 -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('8') != -1"
        @click="handleCheckPayType(0)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/zhiFuBao.png"
          ></image>
          <view class="popup_box_paytype_type">支付宝</view>
        </view>

        <image
          v-if="payTypeChecked == 0"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 支付宝2 墨者支付-->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('9') != -1"
        @click="handleCheckPayType(4)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/mozhe_logo_white.png"
          ></image>
          <view class="popup_box_paytype_type">墨者支付</view>
        </view>

        <image
          v-if="payTypeChecked == 4"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 微信 -->
      <!-- <view class="popup_box_paytype" @click="handleCheckPayType(1)">
            <view class="popup_box_paytype_left">
              <image
                class="popup_box_paytype_icon"
                src="../../static/wechat.png"
              ></image>
              <view class="popup_box_paytype_type">微信</view>
            </view>

            <image
              v-if="payTypeChecked == 1"
              class="popup_box_paytype_checked"
              src="../../static/checked.png"
            ></image>
            <image
              v-else
              class="popup_box_paytype_checked"
              src="../../static/unchecked.png"
            ></image>
          </view> -->

      <!-- 首信易 -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('5') != -1"
        @click="handleCheckPayType(2)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/shouxinyilogo.png"
          ></image>
          <view class="popup_box_paytype_type">首信易</view>
        </view>

        <image
          v-if="payTypeChecked == 2"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 汇元支付 -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('11') != -1"
        @click="handleCheckPayType(6)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/huiyuan_logo.png"
          ></image>
          <view class="popup_box_paytype_type">汇元支付</view>
        </view>

        <image
          v-if="payTypeChecked == 6"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 杉德支付 -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('13') != -1"
        @click="handleCheckPayType(7)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/shande_logo.jpg"
          ></image>
          <view class="popup_box_paytype_type">杉德支付</view>
        </view>

        <image
          v-if="payTypeChecked == 7"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 银行卡 -->
      <!-- <view class="popup_box_paytype" @click="handleCheckPayType(3)" >
            <view class="popup_box_paytype_left">
              <image
                class="popup_box_paytype_icon"
                src="../../static/jdlogo.png"
              ></image>
              <view class="popup_box_paytype_type">银行卡</view>
            </view>

            <image
              v-if="payTypeChecked == 3"
              class="popup_box_paytype_checked"
              src="../../static/checked.png"
            ></image>
            <image
              v-else
              class="popup_box_paytype_checked"
              src="../../static/unchecked.png"
            ></image>
          </view> -->

      <!-- <view class="popup_box_button" @click="handlePayImmediately"
            >立即购买</view
          > -->
    </view>
    <view class="button" @click="$u.debounce(creatrorder, 1000, true)"
      >确认充值</view
    >
  </view>
</template>

<script>
import api from "@/api/api.js";
import tip from "@/utils/tip.js";
export default {
  data() {
    return {
      OpenPayTypeArr: [],
      payTypeChecked: 2,
      iosstate: true,
      price: "",
    };
  },
  onShow() {
    if (uni.getStorageSync("platform") == "ios") {
      this.iosstate = false;
    }
    this.getOpenPayType();
  },
  methods: {
    checkNum(e) {
      // e.detail.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0];
      // this.$nextTick(() => {
      //   this.price = e.detail.value;
      // });
    },
    handleCheckPayType(type) {
      this.payTypeChecked = type;
    },
    async getOpenPayType() {
      let res = await api.openPayType({
        query: {},
        method: "get",
      });
      if (res.code == 0) {
        this.OpenPayTypeArr = res.data.split("|");
        console.log("----this.OpenPayTypeArr", this.OpenPayTypeArr);

        // 禁用余额支付
        // if (this.OpenPayTypeArr.length > 0 && this.OpenPayTypeArr[0] == "1") {
        //   this.OpenPayTypeArr.shift();
        // }
        if (
          this.OpenPayTypeArr.length > 0 &&
          this.OpenPayTypeArr.indexOf("1") != -1
        ) {
          this.OpenPayTypeArr.splice(this.OpenPayTypeArr.indexOf("1"), 1);
        }

        // 默认自动选第一个
        if (this.OpenPayTypeArr[0] == "1") {
          this.payTypeChecked = 5;
        } else if (this.OpenPayTypeArr[0] == "5") {
          this.payTypeChecked = 2;
        } else if (this.OpenPayTypeArr[0] == "8") {
          this.payTypeChecked = 0;
        } else if (this.OpenPayTypeArr[0] == "9") {
          this.payTypeChecked = 4;
        } else if (this.OpenPayTypeArr[0] == "10") {
          this.payTypeChecked = 5;
        } else if (this.OpenPayTypeArr[0] == "13") {
          this.payTypeChecked = 7;
        }
      } else {
      }
    },
    async creatrorder() {
      if (!this.price) {
        tip.defaults("请输入充值金额");
        return;
      }
      if (parseFloat(0) >= parseFloat(this.price)) {
        tip.defaults("金额必须大于零");
        return;
      }
      const res = await api.createRechargeOrder({
        method: "post",
        query: {
          money: this.price,
        },
      });
      if (res.code == 0) {
        this.pay(res.data.order_no);
      } else {
        tip.defaults(res.msg);
      }
    },
    async pay(order_no) {
      let paytype = 3;

      // #ifdef H5
      paytype = 6;
      // #endif
      if (this.payTypeChecked == 0) {
        paytype = 2;
      }
      //首信易
      if (this.payTypeChecked == 2) {
        paytype = 5;
      }
      //银行卡
      if (this.payTypeChecked == 3) {
        paytype = 7;
      }

      // #ifdef H5
      if (this.payTypeChecked == 0) {
        // 支付宝H5
        paytype = 8;
      }
      // #endif

      if (!this.backcardstate && this.payTypeChecked == 3) {
        uni.navigateTo({
          url: "../backcardnew/backcardnew",
        });
        return;
      }

      if (this.payTypeChecked == 6) {
        // 未签约
        if (!this.userInfo.hy_auth_uid) {
          tip.defaults("请前签约汇元支付");

          setTimeout(() => {
            uni.navigateTo({
              url: "../fastPay/fastPay",
            });
          }, 1500);
          return;
        }

        // 60秒内重新点击汇元支付
        if (!this.is_getPayCode) {
          this.show_hy_confirm = true;
          return;
        }

        paytype = 11;
      }

      if (this.payTypeChecked == 7) {
        // 杉德支付
        paytype = 13;
      }

      if (this.payTypeChecked == 4) {
        paytype = 9;
      }

      if (this.payTypeChecked == 5) {
        paytype = 10;
      }

      console.log("-------paytype", paytype);

      const res = await api.pay({
        method: "post",
        query: {
          pay_type: paytype,
          order_no: order_no,
          // client_ip:this.IPaddress
          hy_auth_uid: this.userInfo ? this.userInfo.hy_auth_uid : "",
        },
        loading: "加载中",
      });

      if (res.code == 0) {
        if (this.payTypeChecked == 3) {
          this.backcardSpringframe = true;
          this.bankcardnumber = res.data;
          return;
        }
        if (this.payTypeChecked == 1 && paytype == 6) {
          console.log("网页微信");
          console.log(res.data);
          // window.location.href = res.data;
          if (res.data != null) {
            // window.open(res.data);
            window.location.href = res.data;
          }
          return;
        }
        if (paytype == 8) {
          // window.location.href = res.data;
          if (res.data != null) {
            // window.open(res.data);
            window.location.href = res.data;
          }
          return;
        }
        if (paytype == 9) {
          // #ifdef H5
          // window.location.href = res.data;
          if (res.data != null) {
            // window.open(res.data);
            window.location.href = res.data;
          }
          // #endif

          // #ifdef APP-PLUS
          plus.runtime.openURL(res.data);
          // #endif
          return;
        }
        if (paytype == 10) {
          console.log("----res.data", res.data);
          this.pay_code = res.data;
          this.show_pay_code = true;
          return;
        }
        if (paytype == 11) {
          // 汇元支付 短信倒计时
          this.is_getPayCode = false;
          this.payTimer = 60;
          let payInterval = setInterval(() => {
            this.payTimer--;

            if (this.payTimer <= 0) {
              clearInterval(payInterval);
              this.is_getPayCode = true;
            }
          }, 1000);

          this.hy_token_id = res.data;
          this.show_hy_confirm = true;
          return;
        }
        if (paytype == 13) {
          // #ifdef H5
          if (res.data != null) {
            window.location.href = res.data;
          }
          // #endif

          // #ifdef APP-PLUS
          plus.runtime.openURL(res.data);
          // #endif
          return;
        }
        if (this.payTypeChecked == 2) {
          // #ifdef APP-PLUS
          uni.navigateTo({
            url: `/pages/webview/webview?url=${res.data}`,
          });
          // #endif

          // #ifdef H5
          this.webview_url = res.data;
          this.show_pay_comfirm = true;
          // #endif
          return;
        }
        let appidtype = "wxpay";
        if (this.payTypeChecked == 0) {
          appidtype = "alipay";
        }
        var params = res.data;
        // App上生效
        let orderInfo = {
          appid: params.appid, //对应的appid
          noncestr: params.noncestr,
          package: params.package,
          partnerid: params.partnerid,
          prepayid: params.prepayid,
          timestamp: params.timestamp,
          sign: params.sign, //二次签名
        };
        let alipay = params;
        if (this.payTypeChecked == 1) {
          alipay = JSON.stringify(orderInfo);
        }
        console.log(alipay, "alipayalipayalipayalipay");
        uni.requestPayment({
          provider: appidtype, // wxpay、alipay
          orderInfo: alipay, //微信、支付宝订单数据
          success: function (res) {
            tip.success("支付成功");
            console.log("res", res);
          },
          fail: function (err) {
            tip.defaults("支付失败");
            console.log("err", err);
          },
        });
      } else {
        tip.defaults(res.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  padding: 0 30rpx;
  overflow: hidden;
  background: $bg-color1;
  min-height: calc(100vh - 44px);
}
.button {
  width: 690rpx;
  height: 90rpx;
  color: #ffffff;
  background: $button;
  background-repeat: no-repeat;
  // background-attachment: fixed;
  background-size: 100% 100%;
  border-radius: 16rpx;

  font-size: 32rpx;
  font-weight: 400;
  line-height: 90rpx;
  text-align: center;
  position: fixed;
  bottom: 30rpx;
  left: 30rpx;
}
.price {
  margin-top: 30rpx;
  width: 100%;
  background: $bg-color3;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 30rpx;
  text {
    margin: 30rpx;
    color: $text-color1;
  }
  text:first-child {
    font-size: 16px;
  }
  text:nth-child(2) {
    font-size: 12px;
  }
  .price_input {
    height: 100rpx;
    display: flex;
    align-content: flex-start;
    input {
      height: 120rpx;
      line-height: 120rpx;
      color: $text-color1;
    }
    // border-bottom: 2rpx solid #ffffff;
    text {
      font-size: 22px;
      font-weight: 500;
    }
  }
}
.popup_box {
  //   width: 750rpx;
  width: 100%;
  height: 100%;
  padding: 0rpx 50rpx;
  background: $bg-color3;
  margin: 30rpx 0 60rpx;
  border-radius: 24rpx;
  .popup_box_top {
    font-size: 28rpx;
    font-weight: 400;
    color: $text-color1;
    padding: 30rpx 0 10rpx;
    display: flex;
    justify-content: space-between;
  }
  &_title {
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #bbbbbe;
    line-height: 40rpx;
    text-align: center;
  }
  &_price {
    margin-top: 16rpx;
    height: 58rpx;
    font-size: 48rpx;
    font-weight: bold;
    color: #ffffff;
    line-height: 58rpx;
    text-align: center;
  }
  &_title2 {
    margin-top: 52rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 40rpx;
  }
  &_paytype {
    padding: 40rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_left {
      display: flex;
      align-items: center;
    }
    &_icon {
      width: 40rpx;
      height: 40rpx;
    }
    &_type {
      margin-left: 20rpx;
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: $text-color1;
      line-height: 44rpx;
    }
    &_checked {
      width: 40rpx;
      height: 40rpx;
    }
  }
  &_paytype + &_paytype {
    border-top: 2rpx solid #313535;
  }
  &_button {
    margin-top: 30rpx;
    height: 90rpx;
    background: #0144ef;
    border-radius: 16rpx;

    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 90rpx;
    text-align: center;
  }
}
</style>
